<template>
  <div>
    <el-input
      v-model="value"
      style="width: 300px"
      :type="passwordShowType ? 'text' : 'password'"
    >
      <img
        v-if="passwordShowType"
        style="width: 20px; height: 20px"
        slot="suffix"
        src="https://img0.baidu.com/it/u=3798217922,3880088897&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"
        alt=""
        @click="passwordShowType = false"
      />
      <img
        v-else
        @click="passwordShowType = true"
        style="width: 20px; height: 20px"
        slot="suffix"
        src="https://img1.baidu.com/it/u=722430420,1974228945&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
        alt=""
      />
    </el-input>
  </div>
</template>

<script>
export default {
  data () {
    return {
      passwordShowType: true,
      value: ''
    }
  }
}
</script>

<style>
.el-input__suffix {
  right: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
